//
// Tables
// --------------------------------------------------

.table {
  background-color: #fff;
  &.table-bordered {
    > thead >tr > th, > tbody > tr > td {
      border-left: 0;
      border-right: 0;
      padding-bottom: 8px;
      padding-top: 8px;
      vertical-align: middle;
    }

    &.table-bordered-columns {
      > thead >tr > th, > tbody > tr > td {
        border: 1px solid @table-border-color;
      }
    }
  }
}

.table th .pficon-help {
  color: #999;
  cursor: help;

  &:not(:first-child) {
    margin-left: 5px;
  }
}

.table {
  > tbody {
    + tbody {
      border-top-width: 1px;
    }
  }
}

.table-borderless>tbody>tr>th,
.table-borderless>tfoot>tr>th,
.table-borderless>thead>tr>td,
.table-borderless>tbody>tr>td,
.table-borderless>tfoot>tr>td {
  border-top: none;
}

.table .pull-spec {
  max-width: 700px;

  @media (max-width: @screen-md-max) {
    max-width: 315px;
  }
}

.data-toolbar, .table-toolbar {
  .vertical-divider {
    // Controls are stacked at mobile, so hide the divider.
    display: none;
  }
  @media (min-width: @screen-sm-min) {
    .vertical-divider {
      // @gray-light is too dark, and @gray-lighter is too light.
      // Choose another gray from the Patternfly palette.
      //   https://www.patternfly.org/styles/color-palette/
      border-left: 1px solid #bbbbbb;
      display: inline-block;
      height: 25px;
      margin: 0 7px;
      vertical-align: middle;
      width: 1px;
    }
  }
}

.table-toolbar {
  .filter-controls input {
    width: 100%;
  }
  @media (min-width: @screen-sm-min) {
    // Only needed at larger sizes since form-group has a bottom margin at mobile.
    .gutter-bottom;
    .filter-controls, .sort-controls {
      // Inline controls at wider widths.
      display: inline-block;
    }
    .filter-controls input {
      width: 300px;
    }
  }
}

@media (max-width: @screen-xs-max) {
  .table-mobile {
    border-top: 2px solid @table-border-color;
    // so that .word-break() will work
    table-layout: fixed;
    thead, tbody, th, td, tr {
      display: block;
    }
    thead tr {
      /* Hide table headers (but not display: none;, for accessibility) */
      .sr-only();
    }
    > tbody {
      + tbody {
        border-top-width: 2px;
      }
      > tr {
        > td {
           /* Behave like a row */
          border: none;
          border-bottom: 1px solid lighten(@table-border-color, 5%);
          padding: 3px 6px 2px 35%;
          position: relative;
          &:last-child {
            border-bottom: none;
          }
          &:before {
            /* Act as mobile table header */
            content: attr(data-title);
            position: absolute;
            top: 8px;
            left: 6px;
            width: 35%;
            padding-right: 10px;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

.table-filter-wrapper {
  .flex-display(@display: flex);
  padding: 10px 10px 5px 10px;
  border-top: 1px solid @table-border-color;
  border-left: 1px solid @table-border-color;
  border-right: 1px solid @table-border-color;
  background-color: #f9f9f9;
}

// table for events
.events-table {
  table-layout: fixed;
  th#time {width:90px;}
  th#kind-name {width:190px;}
  th#kind {width:160px;}
  th#severity {width:10px;padding:0;}
  th#reason {width:150px;}
  th#message   {width:100%;} // ensures it gets remaining width
  th#kind-name,th#message  {
    .word-break;
  }
  .pficon {
    vertical-align: middle;
  }
  .severity-icon-td {
    padding-left: 0;
    padding-right: 0;
  }
}
